<template>
  <vxe-grid
    ref="table"
    v-bind="options"
    maxHeight="400"
    showOverflow
    keepSource
    border
    :columns="columns"
    :data="tableData"
    :span-method="spanMethod"
  ></vxe-grid>
</template>
<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    columns: [],
    tableData: [],
  },
  data() {
    return {};
  },
  computed: {
    options() {
      if (this.isEdit) {
        return {
          editConfig: {
            trigger: 'click',
            mode: 'row',
            showIcon: false,
          },
        };
      }
      return {};
    },
  },
  methods: {
    // 通用行合并函数（将相同多列数据合并为一行）
    spanMethod({ row, _rowIndex, column, visibleData }) {
      const fields = ['itemName'];
      const cellValue = row[column.property];
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
  },
};
</script>
